<template>
    <a-list  item-layout="vertical"  size="large" :pagination="pagination" :data-source="searchedHotelList">
        <div slot="footer">from <b>HRS-SE</b> hotel search</div>
        <a-list-item slot="renderItem" key="item.title" slot-scope="item">
            <template slot="actions">
              <span>
                        <a-icon type="star" style="margin-right: 8px"/>
                      {{ item.hotelStar }}
                    </span>
                <span>
                      <a-icon type="like-o" style="margin-right: 8px"/>
                      {{ item.rate }}
                    </span>
                <span v-if="item.isOrdered">
                      <a-icon type="tag" style="margin-right: 8px"/>
                       "曾经预定过"
                </span>

            </template>

            <img
                    slot="extra"
                    width="272"
                    height="190"
                    style="border-radius:12px"
                    alt="logo"
                    :src=" item.pic?'data:image/png;base64,'+item.pic:'https://z1.muscache.cn/im/pictures/9d95205a-6f34-4dfd-8831-35beb8b4da80.jpg?aki_policy=xx_large'"

            />
            <a-list-item-meta :description="item.address" >
                <a slot="title" @click="jumpToDetails(item.id)">{{ item.name }}</a>
                <a-button shape="circle" icon="search" slot="title" type="dashed"  @click.native="jumpToDetails(item.id)" style="margin-left: 12px">
                </a-button>
                <!--                <a-avatar slot="avatar" :src="item.avatar"/>-->
            </a-list-item-meta>
            <div class="hoteldescriptionswipper">
                <a-icon style="margin-top: 4px" type="credit-card" />
                <span class="hoteldescription">
                    {{ item.description}}
                </span>
            </div>
            <div style="margin-top: 10px">
                <a-icon type="phone" />
                {{"联系电话："+ item.phoneNum}}
            </div>
        </a-list-item>
    </a-list>
</template>
<script>
    import {mapGetters, mapMutations, mapActions} from 'vuex'

    export default {
        computed: {
            ...mapGetters(['searchedHotelList'])
        },
        data() {
            return {
                pagination: {
                    onChange: page => {
                        console.log(page);
                    },
                    pageSize: 7,
                },

            };
        },
        methods:{
            jumpToDetails(id) {
                this.$router.push({name: 'hotelDetail', params: {hotelId: id}})
            }
        }
    };
</script>
<style scoped lang="less">
    .hoteldescriptionswipper{
        /*width: 400px;*/
        display: flex;

        flex-direction: row;
    }
    .hoteldescription{
        margin-left: 5px;
        max-width: 650px;

        word-break: break-all;
        display:block;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }


    @import "//at.alicdn.com/t/font_1132913_kay1khsleei.css";
</style>
